<script setup lang="ts">
  import { ref, inject } from 'vue'
  import { getMessageList, MessageDeleteAll, MessageReadAll } from '@/api/user'
  const $Prefix = inject('$Prefix')
    // [
    // {
    //   createdTime: '2023-05-26 17:27',
    //   title: '开营通知',
    //   content: '训练营即将开营，参加本次训练营的人员于开营前1天报到，请各位运动员做好开营准备。'
    // }
    // ]
  const dataList = ref([])
  const paging = ref()
  const loadFun = () => {
    getMessageList().then(res => {
      if(res.code == 200){
        paging.value.complete(res.data)
      }else{
        paging.value.complete(false)
      }
    })
  }

  const navigatorClick = (data:any) => {
    data.pubIfViewEnum = 1
    uni.navigateTo({url:`/pages/notification/detailsNotion?id=${data.id}`})
  }

  const oneClickRead = () => {
    MessageReadAll().then(res => {
      paging.value.reload()
    })
  }
  const oneClickDel = () => {
    MessageDeleteAll().then(res => {
      paging.value.reload()
    })
  }
</script>

<template>
  <view class="message-list">
    <z-paging ref="paging" class="z-paging" v-model="dataList" @query="loadFun">
      <template #top>
        <xx-title title="消息通知"/>
        <view class="message-btn">
          <view class="message-item" @click="oneClickRead">
            <up-icon name="bookmark" color="#2979ff" size="14"></up-icon>
            <text style="color: #2979ff">已读</text>
          </view>
          <view class="message-item" @click="oneClickDel">
            <up-icon name="trash" color="#ff382e" size="14"></up-icon>
            <text  style="color: #ff382e">删除</text>
          </view>
        </view>
      </template>
      <view
        class="children-item"
        v-for="(item, index) in dataList"
        :key="index"
        @click="navigatorClick(item)"
      >
        <view class="message-time">{{ item.createdTime }}</view>
        <view class="message-box">
          <view class="no-look" v-if="item.pubIfViewEnum == 0"></view>
          <view class="message-type">
            <image
              :src="`${$Prefix}/public/images/smallImage/horn.png`"
            ></image>
            {{ item.title }}
          </view>
          <view class="message-content">
            {{ item.content }}
          </view>
        </view>
      </view>

    </z-paging>
  </view>
</template>

<style scoped lang="scss">
  .message-list {
    background-color: #f5f5f5;
    min-height: 100vh;
    .children-item {
      width: calc(100% - 40rpx);
      margin: 20rpx;
      text-align: center;
      .message-time {
        font-size: 26rpx;
        background-color: #D8D9E2;
        color: #ffffff;
        display: inline-block;
        padding: 4rpx 24rpx;
        border-radius: 32rpx;
        margin: 18rpx auto;
        box-sizing: border-box;
      }
      .message-box {
        text-align: left;
        background-color: #ffffff;
        padding: 24rpx 32rpx;
        border-radius: 16rpx;
        position: relative;
        .message-type {
          display: flex;
          align-items: center;
          font-size: 28rpx;
          color: #505363;
          font-weight: 500;
          padding-bottom: 16rpx;
          border-bottom: 1rpx solid #f5f5f5;
          image {
            width: 48rpx;
            height: 48rpx;
            margin-right: 16rpx;
          }
        }
        .message-content {
          font-size: 26rpx;
          color: #505363;
          font-weight: normal;
          line-height: 1.5;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .no-look{
          position: absolute;
          top: 0;
          right: -5rpx;
          width: 20rpx;
          height: 20rpx;
          background-color: #f52c2c;
          border-radius: 100rpx;
        }
      }
    }
    .message-btn{
      display: flex;
      justify-content: flex-end;
      align-items: center;
      background-color: #FFFFFF;
      padding: 20rpx;
      .message-item{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 20rpx;
        text{
          font-size: 28rpx;
        }
      }
    }
  }
</style>
